<script src="../static/js/bootstrap-datetimepicker.js"></script>
<script src="../static/js/bootstrap-datetimepicker.zh-CN.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $("#addRowButton").click(function () {
            var d = {};
            var t = $('#add-work-form').serializeArray();
            $.each(t, function () {
                d[this.name] = this.value;
            });
            alert(JSON.stringify(d));
            $.ajax({
                type: "post",
                data: JSON.stringify(d),
                contentType: 'application/json',
                url: "/add_work",
                success: function (data) {
                    if (data === 1) {
                        $('#context').text('');
                        alert("添加成功！");
                    } else {
                        alert("添加失败！");
                        return false;
                    }
                }
            });
            $('#addRowModal').modal('hide');
        });
    });

</script>
<script>
    $(document).ready(function () {
        $.ajax({
            type: 'POST',
            url: '/get_all_work',
            success: function (data) {
                var tbody = document.getElementById("work-body");
                var action = '<td><div class="form-button-action"><button type="button" data-toggle="tooltip" title="" class="btn btn-link btn-secondary btn-lg peek-task" data-original-title="Peek Task"><i class="fa fa-eye"></i></button><button type="button" data-toggle="tooltip" title="" class="btn btn-link btn-primary btn-lg" data-original-title="Edit Task"><i class="fa fa-edit"></i></button><button type="button" data-toggle="tooltip" title="" class="btn btn-link btn-success btn-lg download-task" data-original-title="Download Task"><i class="fas fa-download"></i></button></div></td>';
                /* <button type="button" data-toggle="tooltip" title="" class="btn btn-link btn-danger" data-original-title="Remove"> <i class="fa fa-times"></i> </button>*/
                //console.log(data);
                for (var i in data) { //遍历data 数组时，i为索引
                    //console.log(data[i]);
                    $('#works-table').dataTable().fnAddData([
                        data[i].work_id,
                        data[i].course_name,
                        data[i].work_name,
                        data[i].path,
                        data[i].sub_count,
                        action
                    ]);
                    /*var row = document.createElement('tr');
                    // 创建td单元格
                    var idCell = document.createElement('td');
                    var name_Cell = document.createElement('td');
                    var pwd_Cell = document.createElement('td');
                    // 给创建的td单元格填充数据
                    idCell.innerHTML = data[i].stu_id;
                    name_Cell.innerHTML = data[i].username;
                    pwd_Cell.innerHTML = data[i].password;
                    // 将新建的td加入新建的tr行
                    row.appendChild(idCell);
                    row.appendChild(name_Cell);
                    row.appendChild(pwd_Cell);
                    // 将这行加到tbody
                    tbody.appendChild(row);*/
                }
            },
            error: function (responseStr) {
                //出错后的动作
                alert("出错,请联系管理员");
            }
        });

        $(document).on('click', '.download-task', function () {
            var work_id = $(this).closest('tr').children('td').eq(0).text();
            var course_name = $(this).closest('tr').children('td').eq(1).text();
            var work_name = $(this).closest('tr').children('td').eq(2).text();
            console.log("work_id=" + work_id);
            location = '/download?' + 'work_id=' + work_id + "&file_name=" + course_name + work_name;
        });

        $(document).on('click', '.peek-task', function () {
            var work_id = $(this).closest('tr').children('td').eq(0).text();
            //console.log("work_id=" + work_id);
            var url = '/peek_path_filename?' + 'work_id=' + work_id;
            $('#filename-peek').modal('show');
            $.ajax({
                type: 'POST',
                url: url,
                success: function (data) {
                    var tbody = document.getElementById("peek-filename-table");
                    //console.log(data);
                    $('#peek-filename-table').dataTable().fnClearTable();
                    for (var i in data) { //遍历data 数组时，i为索引
                        $('#peek-filename-table').dataTable().fnAddData([
                            data[i].fileName
                        ]);
                    }
                },
                error: function (responseStr) {
                    //出错后的动作
                    alert("出错,请联系管理员");
                }
            });
        });

        $('#multi-filter-select').DataTable({
            "pageLength": 5,
            initComplete: function () {
                this.api().columns().every(function () {
                    var column = this;
                    var select = $('<select class="form-control"><option value=""></option></select>')
                        .appendTo($(column.footer()).empty())
                        .on('change', function () {
                            var val = $.fn.dataTable.util.escapeRegex(
                                $(this).val()
                            );

                            column
                                .search(val ? '^' + val + '$' : '', true, false)
                                .draw();
                        });

                    column.data().unique().sort().each(function (d, j) {
                        select.append('<option value="' + d + '">' + d + '</option>')
                    });
                });
            }
        });
    })
</script>
<script type="text/javascript">

    function fileLoad(ele) {
        //创建一个formData对象
        var formData = new FormData();
        formData.append('file', $('#fileupload')[0].files[0]);
        //files 添加到formData中，键值对形式
        $.ajax({
            url: '/upload',
            type: 'POST',
            cache: false,
            data: formData,
            processData: false,
            contentType: false,
            /*beforeSend: function () {
                //发送之前的动作
                alert("");
            },*/
            success: function (data) {
                var tbody = document.getElementById("temptable");
                tbody.innerHTML = "";
                /*alert("成功啦");*/
                //console.log(data);
                for (var i in data) { //遍历data 数组时，i为索引
                    console.log(data[i]);
                    var row = document.createElement('tr');
                    // 创建td单元格
                    var idCell = document.createElement('td');
                    var addressCell = document.createElement('td');
                    // 给创建的td单元格填充数据
                    idCell.innerHTML = data[i].stu_id;
                    addressCell.innerHTML = data[i].username;
                    // 添加点击函数
                    row.onclick = function () {
                        //alert("删除吗");
                    }
                    // 将新建的td加入新建的tr行
                    row.appendChild(idCell);
                    row.appendChild(addressCell);
                    // 将这行加到tbody
                    tbody.appendChild(row);
                }
            },
            error: function (responseStr) {
                //出错后的动作
                alert("出错啦");
            }
        });
    }

    $(function () {
        var $input = $("#fileupload");
        // ①为input设定change事件
        $input.change(function () {
            //    ②如果value不为空，调用文件加载方法
            if ($(this).val() !== "") {
                if ($(this).val() === "" || $(this).isEmpty === true) {
                } else {
                }
                fileLoad();
            }
        })
    })
</script>
<script>
    $(document).ready(function () {
        $('#conExcel').click(function () {
            var keyArray = new Array();
            var timeList = [];
            var nameList = [];
            //keyArray.push()在数组的末尾添加
            $('#temptable tr').each(function (i) {                   // 遍历 tr
                timeList.push($(this).children().eq(0).text());
                nameList.push($(this).children().eq(1).text());
                /*$(this).children('td').each(function(j){  // 遍历 tr 的各个 td
                    alert("第"+(i+1)+"行，第"+(j+1)+"个td的值："+$(this).text()+"。");
                });*/
            });
            //console.log(timeList);
            //console.log(nameList);
            for (var i = 0; i < timeList.length; i++) {
                keyArray.push({
                    stu_id: timeList[i],
                    username: nameList[i],
                    password: "",
                });
            }
            console.log(JSON.stringify(keyArray));
            let jsonObj = $.parseJSON(JSON.stringify(keyArray));//json字符串转化成json对象(jq方法)
            $.ajax({
                type: "post",
                data: JSON.stringify(keyArray),
                contentType: 'application/json',
                url: "/save_all",
                success: function (data) {
                    if (data == 1) {
                        $('#context').text('');
                        alert("成功！");
                    } else {
                        alert("失败！");
                        return false;
                    }
                    getcomment();
                }
            });
            alert("success");
        });
    })
</script>
<script type="text/javascript">
    $(document).ready(function () {
        $.ajax({
            type: "post",
            url: "/get_all_course",
            success: function (data) {
                console.log(data);
                for (var i = 0; i < data.length; i++) {
                    $("#course-select").append("<option value='" + data[i].course_id + "'>" + data[i].course_name + "</option>");
                }
            }
        });
    })
</script>
<!-- CSS Files -->
<link rel="stylesheet" href="../../assets/css/bootstrap.min.css">
<link rel="stylesheet" href="../../assets/css/azzara.min.css">
<!-- CSS Just for demo purpose, don't include it in your project -->
<link rel="stylesheet" href="../../assets/css/demo.css">
<div class="page-header">
    <h4 class="page-title">作业管理</h4>
    <ul class="breadcrumbs">
        <li class="nav-home">
            <a href="#">
                <i class="flaticon-home"></i>
            </a>
        </li>
        <li class="separator">
            <i class="flaticon-right-arrow"></i>
        </li>
        <li class="nav-item">
            <a href="#">管理选项</a>
        </li>
        <li class="separator">
            <i class="flaticon-right-arrow"></i>
        </li>
        <li class="nav-item">
            <a href="#">作业管理</a>
        </li>
    </ul>
</div>
<div class="row">

    <div class="col-md-12">
        <div class="card">
            <div class="card-header">
                <div class="d-flex align-items-center">
                    <h4 class="card-title">作业清单</h4>
                    <!--<button class="btn btn-primary btn-round ml-auto" data-toggle="modal"
                            data-target="#excelModal">
                        <i class="fa fa-plus"></i>
                        Excel(不可用)
                    </button>-->
                    <button class="btn btn-primary btn-round ml-auto" data-toggle="modal"
                            data-target="#addRowModal">
                        <i class="fa fa-plus"></i>
                        增加
                    </button>
                </div>
            </div>
            <div class="card-body">
                <!-- Modal -->
                <div class="modal fade" id="addRowModal" tabindex="-1" role="dialog" aria-hidden="true">
                    <div class="modal-dialog" role="document">
                        <div class="modal-content">
                            <div class="modal-header no-bd">
                                <h5 class="modal-title">
														<span class="fw-mediumbold">
														部署</span>
                                    <span class="fw-light">
															任务
														</span>
                                </h5>
                                <button type="button" class="close" data-dismiss="modal"
                                        aria-label="Close">
                                    <span aria-hidden="true">&times;</span>
                                </button>
                            </div>
                            <!--add row窗口-->
                            <div class="modal-body">
                                <p class="small">增加一条新的提交任务</p>
                                <div class="card-body">
                                    <form id="add-work-form" role="form" action="add_work" method="post">
                                        <label class="mb-3"><b>基本项</b></label>
                                        <div class="form-group form-group-default">
                                            <label>任务名</label>
                                            <input id="Name" name="work_name" type="text" class="form-control"
                                                   placeholder="必填">
                                        </div>
                                        <div class="form-group form-group-default">
                                            <label>课程名</label>
                                            <select class="form-control" id="course-select" name="course_id">
                                                <option value="0" selected="selected">缺省</option>
                                            </select>
                                        </div>
                                        <label class="mt-3 mb-3"><b>高级选项</b></label>
                                        <div class="form-group form-floating-label">
                                            <input id="inputFloatingLabel" name="naming_rule" type="text"
                                                   class="form-control input-border-bottom" required="">
                                            <label for="inputFloatingLabel" class="placeholder">文件名正则</label>
                                        </div>
                                        <div class="form-group form-floating-label">
                                            <input class="form-control input-solid" id="deadline-date" name="deadline"
                                                   required="">
                                            <label for="deadline-date" class="placeholder">截止日期</label>
                                        </div>
                                    </form>
                                </div>
                            </div>
                            <div class="modal-footer no-bd">

                                <button type="button" id="addRowButton" class="btn btn-primary">Add
                                </button>

                                <button type="button" class="btn btn-danger" data-dismiss="modal">
                                    Close
                                </button>
                            </div>
                        </div>
                    </div>

                </div>


                <div class="modal fade" id="excelModal" tabindex="-1" role="dialog" aria-hidden="true">
                    <div class="modal-dialog" role="document">
                        <div class="modal-content">
                            <div class="modal-header no-bd">
                                <h5 class="modal-title">
														<span class="fw-mediumbold">
														Import</span>
                                    <span class="fw-light">
															Excel
														</span>
                                </h5>
                                <button type="button" class="close" data-dismiss="modal"
                                        aria-label="Close">
                                    <span aria-hidden="true">&times;</span>
                                </button>
                            </div>
                            <!--add row窗口-->
                            <div class="modal-body">
                                <p class="small">Create a new row using this form, make sure you fill
                                    them all</p>


                                <div class="row">
                                    <form>
                                        <div class="col-sm-12">
                                            <div class="form-group form-group-default">
                                                <label>Name</label>
                                                <input type="file" name="uploadfile"
                                                       class="btn btn-secondary" id="fileupload"/>
                                            </div>
                                        </div>
                                    </form>
                                    <div class="col-md-6 pr-0">
                                        <div class="form-group form-group-default">
                                            <label>Position</label>
                                            <table class="table mt-3">
                                                <thead>
                                                <tr>
                                                    <th scope="col">学号</th>
                                                    <th scope="col">姓名</th>
                                                </tr>
                                                </thead>
                                                <tbody id="temptable">
                                                <tr>
                                                    <td>请先选择文件</td>
                                                </tr>
                                                </tbody>
                                            </table>
                                            <button class="btn btn-secondary" id="al">
											<span class="btn-label">
												<i class="fa fa-plus"></i>
											</span>
                                                Secondary
                                            </button>
                                        </div>
                                    </div>
                                    <!--<div class="col-md-6">
                                        <div class="form-group form-group-default">
                                            <label>Office</label>

                                        </div>
                                    </div>-->
                                </div>
                            </div>
                            <div class="modal-footer no-bd">
                                <button type="button" id="conExcel" class="btn btn-primary">√
                                </button>
                                <button type="button" class="btn btn-danger" data-dismiss="modal">
                                    Close
                                </button>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="modal fade" id="filename-peek" tabindex="-1" role="dialog" aria-hidden="true">
                    <div class="modal-dialog" role="document">
                        <div class="modal-content">
                            <div class="modal-header no-bd">
                                <h5 class="modal-title">
														<span class="fw-mediumbold">
														文件</span>
                                    <span class="fw-light">
															预览
														</span>
                                </h5>
                                <button type="button" class="close" data-dismiss="modal"
                                        aria-label="Close">
                                    <span aria-hidden="true">&times;</span>
                                </button>
                            </div>
                            <!--add row窗口-->
                            <div class="modal-body">
                                <p class="small">当前课程目录已上传到磁盘中的文件</p>
                                <div class="row">
                                    <table id="peek-filename-table" class="table mt-3">
                                        <thead>
                                        <tr>
                                            <th scope="col">#</th>
                                        </tr>
                                        </thead>
                                        <tbody>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                            <div class="modal-footer no-bd">
                                <button type="button" class="btn btn-danger" data-dismiss="modal">
                                    Close
                                </button>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="table-responsive">
                    <table id="works-table" class="display table table-striped table-hover">
                        <thead>
                        <tr>
                            <th>#</th>
                            <th>学科</th>
                            <th>作业名</th>
                            <th>目标路径</th>
                            <th>已交人数</th>
                            <th style="width: 10%">操作</th>
                        </tr>
                        </thead>
                        <tfoot>
                        <tr>
                            <th>#</th>
                            <th>学科</th>
                            <th>作业名</th>
                            <th>目标路径</th>
                            <th>已交人数</th>
                            <th style="width: 10%">操作</th>
                        </tr>
                        </tfoot>
                        <tbody id="work-body">

                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Datatables -->
<script src="../../assets/js/plugin/datatables/datatables.min.js"></script>
<script>
    $(document).ready(function () {
        $('#basic-datatables').DataTable({});

        $('#multi-filter-select').DataTable({
            "pageLength": 5,
            initComplete: function () {
                this.api().columns().every(function () {
                    var column = this;
                    var select = $('<select class="form-control"><option value=""></option></select>')
                        .appendTo($(column.footer()).empty())
                        .on('change', function () {
                            var val = $.fn.dataTable.util.escapeRegex(
                                $(this).val()
                            );

                            column
                                .search(val ? '^' + val + '$' : '', true, false)
                                .draw();
                        });

                    column.data().unique().sort().each(function (d, j) {
                        select.append('<option value="' + d + '">' + d + '</option>')
                    });
                });
            }
        });

        // Add Row
        $('#works-table').DataTable({
            "pageLength": 5,
        });

        var action = '<td> <div class="form-button-action"> <button type="button" data-toggle="tooltip" title="" class="btn btn-link btn-primary btn-lg" data-original-title="Edit Task"> <i class="fa fa-edit"></i> </button> <button type="button" data-toggle="tooltip" title="" class="btn btn-link btn-danger" data-original-title="Remove"> <i class="fa fa-times"></i> </button> </div> </td>';

        /*        $('#addRowButton').click(function () {
                    $('#add-row').dataTable().fnAddData([
                        $("#addName").val(),
                        $("#addPosition").val(),
                        $("#addOffice").val(),
                        action
                    ]);
                    $('#addRowModal').modal('hide');

                });*/
    });
</script>
<script type="text/javascript">
    $('#deadline-date').datetimepicker({
        startDate: new Date(),
        forceParse: 0,//设置为0，时间不会跳转1899，会显示当前时间。
        language: 'zh-CN',//显示中文
        format: 'yyyy-mm-dd hh:ii',//显示格式
        minView: "hour",//设置只显示到月份
        initialDate: new Date(),//初始化当前日期
        autoclose: true,//选中自动关闭
        todayBtn: true,//显示今日按钮
        pickerPosition: 'top-left'
    })
    /*$("#deadline-date").datetimepicker("setDate", new Date() );  //设置显示默认当天的时间*/
</script>
